<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./css/swiper-bundle.css">
    <link rel="stylesheet" href="./css/banner2.css">


</head>

<body>
    <!-- Swiper -->
    <div class="ups">
        <div class="banner2-text">
            <div class="text-top">23</div>
            <div class="text-cen"></div>
            <div class="month">五月</div>
        </div>
        <h2 class="banner2-h2">精选</h2>
        <div class="swiper-container" id="container2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <ul class="ul-banner2">
                        <li class="li-banner2">
                            <div class="con-top">
                                <a class="a-banner2"><img src="./img/收藏.png" alt=""></a>
                                <div class="con-img"><img
                                        src="https://www.dior.cn/couture/ecommerce/media/catalog/product/cache/1/grid_image/460x497/17f82f742ffe127f42dca9de82fb58b1/o/P/1592402957_HYK01VDJ0U_C970_E01_GH.jpg"
                                        alt=""></div>
                            </div>
                            <div class="con-under">
                                <div class="zk"></div>
                                <span class="sp-ba">30 Montaigne 手袋</span>
                                <p class="zk-p1">蓝色提花 Oblique 印花</p>
                                <div class="price">￥29,500</div>
                                <div class="anniu">
                                    <p class="p2">
                                        <span class="sp1"><img src="./img/购物车白.png"></span>
                                        <span class="sp2">立即选购</span>
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li class="li-banner2">
                            <div class="con-top">
                                <a class="a-banner2"><img src="./img/收藏.png" alt=""></a>
                                <div class="con-img"><img
                                        src="https://www.dior.cn/couture/var/dior/storage/images/horizon/selection/cn-pcd-2-limited-lipstick/16168656-21-chi-CN/cn-pcd-2-limited-lipstick_1440_1200.png"
                                        alt=""></div>
                            </div>
                            <div class="con-under">
                                <div class="zk">
                                    <p class="zk-p">#新品</p>
                                </div>
                                <span class="sp-ba">真我</span>
                                <p class="zk-p1">缪斯香水</p>
                                <div class="price">￥1,650</div>
                                <div class="anniu">
                                    <p class="p2"><span class="sp1"><img src="./img/购物车白.png"></span><span
                                            class="sp2">立即选购</span></p>
                                </div>
                            </div>
                        </li>
                        <li class="li-banner2">
                            <div class="con-top">
                                <a class="a-banner2"><img src="./img/收藏.png" alt=""></a>
                                <div class="con-img"><img
                                        src="https://www.dior.cn/couture/ecommerce/media/catalog/product/cache/1/grid_image/460x497/17f82f742ffe127f42dca9de82fb58b1/z/S/1618248336_M1286ZRGO_M928_E01_GH.jpg"
                                        alt=""></div>
                            </div>
                            <div class="con-under">
                                <div class="zk"></div>
                                <span class="sp-ba">马鞍手拿包</span>
                                <p class="zk-p1">蓝色提花 Oblique 印花</p>
                                <div class="price">￥16,500</div>
                                <div class="anniu">
                                    <p class="p2"><span class="sp1"><img src="./img/购物车白.png"></span><span
                                            class="sp2">立即选购</span></p>
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>
                <div class="swiper-slide">

                    <ul class="ul-banner2">
                        <li class="li-banner2">
                            <div class="con-top">
                                <a class="a-banner2"><img src="./img/收藏.png" alt=""></a>
                                <div class="con-img"><img
                                        src="https://www.dior.cn/couture/ecommerce/media/catalog/product/cache/1/grid_image/460x497/17f82f742ffe127f42dca9de82fb58b1/8/O/1621323982_M9203UTZQ_M928_E01_GH.jpg"
                                        alt=""></div>
                            </div>
                            <div class="con-under">
                                <div class="zk"></div>
                                <span class="sp-ba">30 Montaigne 手袋</span>
                                <p class="zk-p1">蓝色提花 Oblique 印花</p>
                                <div class="price">￥29,500</div>
                                <div class="anniu">
                                    <p class="p2">
                                        <span class="sp1"><img src="./img/购物车白.png"></span>
                                        <span class="sp2">立即选购</span>
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li class="li-banner2">
                            <div class="con-top">
                                <a class="a-banner2"><img src="./img/收藏.png" alt=""></a>
                                <div class="con-img"><img
                                        src="https://www.dior.cn/couture/ecommerce/media/catalog/product/cache/1/grid_image/460x497/17f82f742ffe127f42dca9de82fb58b1/t/N/1605181510_M0538OCAL_M900_E01_GH.jpg"
                                        alt=""></div>
                            </div>
                            <div class="con-under">
                                <div class="zk">
                                    <p class="zk-p">#新品</p>
                                </div>
                                <span class="sp-ba">真我</span>
                                <p class="zk-p1">缪斯香水</p>
                                <div class="price">￥1,650</div>
                                <div class="anniu">
                                    <p class="p2"><span class="sp1"><img src="./img/购物车白.png"></span><span
                                            class="sp2">立即选购</span></p>
                                </div>
                            </div>
                        </li>
                        <li class="li-banner2">
                            <div class="con-top">
                                <a class="a-banner2"><img src="./img/收藏.png" alt=""></a>
                                <div class="con-img"><img
                                        src="https://www.dior.cn/couture/ecommerce/media/catalog/product/cache/1/grid_image/460x497/17f82f742ffe127f42dca9de82fb58b1/R/k/1621334784_S5620CTZQ_M928_E01_GH.jpg"
                                        alt=""></div>
                            </div>
                            <div class="con-under">
                                <div class="zk"></div>
                                <span class="sp-ba">马鞍手拿包</span>
                                <p class="zk-p1">蓝色提花 Oblique 印花</p>
                                <div class="price">￥16,500</div>
                                <div class="anniu">
                                    <p class="p2"><span class="sp1"><img src="./img/购物车白.png"></span><span
                                            class="sp2">立即选购</span></p>
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>
            <!-- Add Arrows -->

        </div>
        <div class="swiper-button-next2"></div>
        <div class="swiper-button-prev2"></div>
    </div>
    <!-- Swiper JS -->
    <script src="./javascripts/swiper-bundle.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('#container2', {
            navigation: {
                nextEl: '.swiper-button-next2',
                prevEl: '.swiper-button-prev2',
            },
        });
    </script>
</body>

</html>